<template>
      <h1 style="font-size:40px;">活动管理</h1>
    <!-- 消息提示 -->
    <template>
      <el-button :plain="true" @click="open2">success</el-button>
      <el-button :plain="true" @click="open3">warning</el-button>
      <el-button :plain="true" @click="open1">message</el-button>
      <el-button :plain="true" @click="open4">error</el-button>
    </template>
    <!-- 添加按钮 -->
    <el-button type="primary" @click="addList">+</el-button>
  
    <!-- <el-main class="Main"> -->
   <!-- 模态框 -->
   <template>
    
    <el-dialog v-model="dialogTableVisible" title="Shipping address">
      <el-table :data="gridData">
        <el-table-column property="date" label="Date" width="150" />
        <el-table-column property="name" label="Name" width="200" />
        <el-table-column property="address" label="Address" />
      </el-table>
    </el-dialog>
  
  </template>
  
  <!-- "id": "0997ae6b-11e8-4f8f-af4a-eeb3d427ee74",
        "coverImage": "https://img0.baidu.com/it/u=3937037805,3773162018&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=699",
        "name": "测试活动",
        "desc": "string",
        "content": "string",
        "createdAt": "2023-04-11T03:05:50.504Z",
        "updatedAt": "2023-04-12T09:57:01.260Z"
   -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="序号" width="100" type="index" />
      <el-table-column prop="name" label="用户名" width="160" />
      <el-table-column prop="desc" label="标题" width="160" />
      <el-table-column prop="content" label="活动内容" width="160" />
      <el-table-column prop="coverImage" label="活动图片" width="160">
        <template #default="scope">
          <img :src="scope.row.coverImage" alt="" width="100" height="100" />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope" class="mb-4">
          <!-- scope.$index 索引 -->
          <!-- scope.row 当前行的数据 -->
          <el-button link type="danger" bg="true" size="small" @click="handleClick(scope.row)">删除</el-button>
          <el-button link type="danger"  bg="true" size="small">修改</el-button>
  
        </template>
      </el-table-column>
    </el-table>
  
    <!-- 删除消息弹出 -->
    <!-- <template>
    <el-button text @click="open">确定删除此项吗?</el-button>
  </template> -->
  
  
    <!-- </el-main> -->
  </template>
  <script  setup>
  import { ref,reactive } from 'vue';
  import { ww } from '../api/axiosEE.js';
  import { ElMessage, ElMessageBox, } from 'element-plus'
  
  
  // 接口模版
  // ww({
  //       url,
  //       method,
  //       params,
  //   })
  
  
  // 接收列表数据
  const tableData = ref([]);
  
  // 请求数据
  const getData = () => {
    ww({
      url: '/api/v1/admin/activities',
      method: 'get',
      params: {
        page: 1,
        per: 10
      }
    })
      .then(res => {
        console.log(res);
        console.log(res.data.data)
        if (res.status == '200') {
          console.log('获取成功');
          console.log(res.data.data.list);
  
          tableData.value = res.data.data.list;
  
          return res.data.data.list;
        } else {
          console.log('失败,可能没登录');
        }
      })
  }
  getData();
  
  // ELE插件 删除
  const handleClick = (row) => {
    console.log(row);
    console.log(row.id);
    ww({ url: '/api/v1/admin/users/' + row.id, method: 'delete' }).then(req => {
      console.log(req);
      console.log('删除');
      getData();
    },)
    console.log('click')
    // 删除完成重新渲染
  }
  
  
  
  
  
  
  
  
  // 添加个死数据看看 活动
  const addList = () => {
    ww({
      url: '/api/v1/admin/activities',
      method: 'post',
      data: {
    "name": "测试活动"+(Math.random().toFixed(2)),
    "coverImage": `https://picsum.photos/200/300?${Math.random().toFixed(1)*10}`,
    "desc": "测试标题"+(Math.random().toFixed(2)),
    "content": "测试内容"+(Math.random().toFixed(10))
      }
    }).then(req => {
      console.log(req);
      if (req.data.success) {
        ElMessage({
          message: '添加成功',
          type: 'success',
        })
        //刷新数据
        getData();
      } else {
        // 两种写法都可以
        // ElMessage.error(req.data.errorMessage)
        ElMessage({
          message: req.data.errorMessage,
          type: 'error',
        })
      }
    })
  }
  
  
  
  
  
  
  
  </script>